<template>
  <div>
    <canvas id="canvas"></canvas>
    <img :src="img" alt="" style="width:200px" />
  </div>
</template>

<script>
import QRCode from "qrcode";
const ws = new WebSocket("ws://192.168.1.8:8000");
export default {
  data() {
    return {
      img: "",
    };
  },
  mounted() {
    this.getQR();
    ws.addEventListener("open", this.handlerOpen.bind(this), false);
    ws.addEventListener("close", this.handlerClose.bind(this), false);
    ws.addEventListener("error", this.handlerError.bind(this), false);
    ws.addEventListener("message", this.handlerMessage.bind(this), false);
  },
  methods: {
    getQR() {
      QRCode.toCanvas(
        document.getElementById("canvas"),
        "http://192.168.1.8:8080/#/mobile",
        function(error) {
          if (error) console.error(error);
          console.log("success!");
        }
      );
    },
    handlerOpen(e) {
      console.log("Open");
    },
    handlerClose(e) {
      console.log("Close");
    },
    handlerError(e) {
      console.log("Error");
    },
    handlerMessage(e) {
      this.img = e.data;
    },
  },
};
</script>

<style></style>
